<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        div {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<script src="echarts.js"></script>

<body style="height:100%;">
    <div id="main"></div>
    <script>
        function setData(dataY, dataX) {
            var myChart = echarts.init(document.getElementById('main'));
            myChart.clear();
            option = {
                grid: {
                    left: '3%',
                    right: '0%',
                    bottom: '8%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dataX,
                    axisLine: {
                        lineStyle: {
                            color: '#388E3C' // X轴线颜色[2](@ref)
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#388E3C' // X轴刻度线颜色
                        }
                    },
                    axisLabel: {
                        formatter: function (value) {

                            return value.replace(' ', '\n');
                        },
                        textStyle: {
                            fontSize: 14,
                            color: '#388E3C' // X轴标签颜色[3](@ref)
                        }
                    }
                },
                dataZoom: [
                    // 2. 内置型 (inside)
                    {
                        type: 'inside',
                        xAxisIndex: 0,
                        start: 0,
                        end: 40,
                        // 可以设置内置型交互细节，如缩放锁定的平移模式
                        zoomLock: true // 锁定缩放比例，只允许平移[5](@ref)
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    confine: true, // 防止tooltip溢出
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    borderRadius: 6,
                    textStyle: {
                        color: '#fff'
                    },
                    extraCssText: 'height: auto; width: auto;'
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#388E3C' // Y轴线颜色[2](@ref)
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#388E3C' // Y轴刻度线颜色
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 14,
                            color: '#388E3C' // Y轴标签颜色[3](@ref)
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed', // Y轴网格线改为虚线[6,7](@ref)
                            color: '#C8E6C9' // 虚线颜色
                        }
                    }
                },

                series: [
                    {
                        type: 'line',
                        smooth: true,
                        showSymbol: true,
                        symbol: 'circle',
                        symbolSize: 8,
                        areaStyle: {
                            opacity: 0.7,
                        },
                        data: dataY,
                        label: {
                            show: true, // 开启标签显示
                            position: 'top' // 标签显示在数据点上方
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

    </script>
    <style>

    </style>
</body>

</html>